import React from 'react'
import MyHead from './../../components/MyHead';
import { DownOutline } from 'antd-mobile-icons'
import { SideBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { useEffect, memo, useState } from 'react';
import { getGoodInfoAsync } from '../../rtk/modules/data';
import './index.scss'
import Clist from '../../components/Clist';


const Classify = memo(() => {
    const router = useNavigate()
    const city = useSelector((state: any) => state.data.city)
    const goodType = useSelector((state: any) => state.data.goodType)
    const goodList = useSelector((state: any) => state.data.goodList)
    const dispatch: any = useDispatch()

    useEffect(() => {
        dispatch(getGoodInfoAsync({}))
    }, [dispatch])

    const [activeKey, setActiveKey] = useState<any>('0')


    return (
        <div className='classify '>
            <MyHead title='分类' >
                <div style={{ display: 'flex', alignItems: 'center' }} onClick={() => router('/city')}>
                    <DownOutline />
                    {
                        city ? <span>{city.name}</span>
                            : <span>请选择城市</span>
                    }
                </div>
            </MyHead>
            <div className="classify-box">
                <div className="left">
                    <SideBar activeKey={activeKey} onChange={setActiveKey}>
                        {goodType.map((item: any, index: number) => (
                            <SideBar.Item key={index} title={item.text} />
                        ))}
                    </SideBar>
                </div>
                <div className="right">
                    {
                        activeKey == 0 ?
                            <Clist goods={goodList}></Clist>
                            :
                            <Clist goods={goodList.filter((item: any) => item.type.value == goodType[activeKey].value)}></Clist>
                    }
                </div>
            </div>
        </div>
    )
})

export default Classify